<script setup>
import { ref } from 'vue'
import logo from "@/assets/logo.png"
import { login } from '@/api/login'
import { useUserStore } from '@/stores';
import router from '@/router'

const loginVisable = ref(true)
const loginmodel = ref({
  username: '',
  password: ''
})
const userStore = useUserStore()
// const authStore = useAuthStore()
const dologin = async () => {
  userStore.removeToken()
  await login(loginmodel.value).then((res) => {
    if (res.data.success) {
      userStore.setToken(res.data.data)
    }
    console.log(res)
  }
  )
  // await getUserInfo().then((res) => {
  //   if (res.data.success) {
  //     userStore.setUserInfo(res.data.data)
  //     authStore.setauthComponentList(res.data.data.components)
  //     authStore.setauthPermissionList(res.data.data.permissions)
  //   }
  // }
  // )
  ElMessage.success('登录成功')
  router.push('/main')
}



function changeLoginVisable() {
  loginVisable.value = !loginVisable.value
}
</script>

<template>
  <el-row class="loginPage">
    <el-col :span="14" class="bg"></el-col>
    <el-col :span="5" :offset="2" class="table">
      <el-form v-if="loginVisable" :model="loginmodel" label-width="auto" class="loginbox"
        style="box-shadow: --el-box-shadow-dark">
        <h1>
          <img :src="logo" class="logo">
          工业互联网平台
        </h1>
        <el-form-item label="用户名">
          <el-input v-model="loginmodel.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginmodel.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" class="loginbtn" @click="dologin">登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" @click="changeLoginVisable">注册账号</el-link>
        </el-form-item>
      </el-form>
      <el-form v-if="!loginVisable" label-width="auto" class="loginbox" style="box-shadow: --el-box-shadow-dark">
        <h1>
          <img :src="logo" class="logo">
          注册账号
        </h1>
        <el-form-item label="用户名">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="registebtn">注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" @click="changeLoginVisable">已有帐号登录</el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">
.loginPage {
  display: flex;
  align-content: center;
  height: 100vh;
  // background-color: white;
  background: url('@/assets/index-backgroud.png') no-repeat center / cover;


  .table {


    h1 {
      margin-bottom: 32px;
      font-weight: 700;
      color: #181F27;
      text-align: center;
      font-family: 华文琥珀;
      font-weight: 200;

      .logo {
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }

  .el-form {
    width: 300px;
    margin: 0 auto;
    padding: 20px 30px;
    border-radius: 20px;
    // background-color: rgba(255, 255, 255, 0.9);

    .loginbtn,
    .registebtn {
      width: 100%
    }
  }
}

.el-form-item {
  margin-bottom: 0px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
}

.loginbox {
  background-color: #fff;
  padding: 20px 30px;
  border: 1px solid rgb(211, 211, 211);
  border-radius: 10px;
}

.el-form-item:focus-within {
  background: rgba(211, 211, 211, 0.5);
}
</style>
